<template>
	<div class="contain">
		<div class="contain-header">
			<el-form  label-width="50px" inline >
				<el-form-item label="账户:">
					<el-input  placeholder="请输入账户" v-model="pageForm.loginName"></el-input>
				</el-form-item>
				<el-form-item label="姓名:">
					<el-input  placeholder="请输入姓名" v-model="pageForm.userName"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="getList">搜 索</el-button>
					<el-button  size="small" @click="resetList">重 置</el-button>
					<el-button type="primary" size="small" @click="addDialog = true">新 增</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="contain-table">
			<div class="tab-line">
				<div class="tab-show">序 号</div>
				<div class="tab-show">账 号</div>
				<div class="tab-show">姓 名</div>
				<div class="tab-show">性 别</div>
				<div class="tab-show">所属学校</div>
				<div class="tab-set">操 作</div>
			</div>
			<div class="tab-body" v-for="(item,index) in list" :key="item.id">
				<div class="tab-show">{{index + 1}}</div>
				<div class="tab-show">{{item.loginName}}</div>
				<div class="tab-show">{{item.userName}}</div>
				<div class="tab-show">{{item.gender === 0? '女' : '男'}}</div>
				<div class="tab-show">{{item.schoolName}}</div>
				<div class="tab-set">
					<el-button type="danger" text size="default" @click="openSee(item)">班级管理</el-button>
					<el-button type="primary" text size="default" @click="openEdit(item)">编辑</el-button>
					<el-button type="primary" text size="default" @click="del(item.id)">删除</el-button>
					<el-button type="primary" text size="default" @click="res(item.id)">重置密码</el-button>
				</div>
			</div>
		</div>
		<div class="contain-footer">
			<el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					:page-size="5"
					class="mt-4"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
			/>
		</div>
	</div>
	<el-dialog
			v-model="addDialog"
			title="新增教师"
			width="30%"
	>
		<el-form>
			<el-form-item label="账号:">
				<el-input v-model="addForm.loginName" placeholder="请输入账号" />
			</el-form-item>
			<el-form-item label="姓名:">
				<el-input v-model="addForm.userName" placeholder="请输入姓名" />
			</el-form-item>
			<el-form-item label="性别:">
				<el-select  placeholder="请选择性别" v-model="addForm.gender"  >
					<el-option  v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="学校:">
				<el-select  placeholder="请选择学校" v-model="addForm.schoolId" clearable @clear="changeEdit" >
					<el-option  v-for="item in schList" :key="item.id" :label="item.schoolName" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="班级:">
				<el-select  placeholder="请先选择学校" v-model="addForm.classIds" clearable  multiple>
					<el-option  v-for="item in clsList"  :key="item.id" :label="item.className" :value="item.id" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="addDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitAdd">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
	<el-dialog
			v-model="editDialog"
			title="编辑教师"
			width="30%"
	>
		<el-form>
			<el-form-item label="账号:">
				<el-input v-model="editForm.loginName" placeholder="请输入账号" />
			</el-form-item>
			<el-form-item label="姓名:">
				<el-input v-model="editForm.userName" placeholder="请输入姓名" />
			</el-form-item>
			<el-form-item label="性别:">
				<el-select  placeholder="请选择性别" v-model="editForm.gender"  >
					<el-option  v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="学校:">
				<el-select  placeholder="请选择学校" v-model="editForm.schoolId" @change="changeEditSch" clearable @clear="changeEdit" >
					<el-option  v-for="item in schList" :key="item.id" :label="item.schoolName" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="班级:">
				<el-select  placeholder="请先选择学校" v-model="editForm.classIds" clearable  multiple>
					<el-option  v-for="item in clsList"  :key="item.id" :label="item.className" :value="item.id" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="editDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitEdit">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
	<el-dialog
			v-model="seeDialog"
			title="班级管理"
			width="30%"
	>
		<div style="width: 50%;margin: 0 auto;text-align: center;border: 1px solid #ccc;border-radius: 10px;border-bottom: none;overflow: hidden;color: #000">
			<div style="padding: 10px 0;box-sizing: border-box;border-bottom: 1px solid #ccc">班级</div>
			<div style="padding: 10px 0;box-sizing: border-box;border-bottom: 1px solid #ccc" v-for="item in seeList" :key="item.id">{{item.className}}</div>
		
		</div>
		<template #footer>
		  <span class="dialog-footer">
			<el-button type="primary" @click="seeDialog = false">关 闭</el-button>
		  </span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
    import {onMounted, reactive, ref, watch} from "vue";
    import {stuPage, addTec, editUser, delUser, retPas, editTec} from "../api/loginMoudles";
    import {schNoPage} from "../api/schoolMoudles";
    import {classNoPage} from "../api/classMoudles";
    import {ElMessageBox, ElNotification} from "element-plus";

    const pageForm = reactive({
        classId: null,
        loginName: "",
        pageIndex: 1,
        pageSize: 5,
        roleFlag: 2,
        schoolId: null,
        userName: ""
    })
    let list = ref([])
    let total = ref(0)
    const getList = async () => {
        const { data } = await stuPage(pageForm)
        if (data.statusCode === 200){
            list.value = data.data.data
            total.value = data.data.total
        }
    }
    //分页
    const handleSizeChange = (val: number) => {
        pageForm.pageSize = val
        getList()
    }
    const handleCurrentChange = (val: number) => {
        pageForm.pageIndex = val
        getList()
    }
    const resetList = () => {
        pageForm.schoolId = null
        pageForm.classId = null
        pageForm.loginName = ""
        pageForm.userName = ""
        getList()
    }
    onMounted(() => {
        getList()
        getSch()
    })

    let schList = ref([])
    const getSch = async () => {
        const { data } = await schNoPage()
        if (data.statusCode === 200){
            schList.value = data.data
        }
    }
    let clsList = ref([])
 
   
    let sexList = ref([
		{
		    id:0,
		    name:'女'
		},
        {
            id:1,
            name:'男'
        },
	])
    //新增
    let addDialog = ref<boolean>(false)
	interface add {
        classIds:any,
        gender:number,
        loginName:string,
        schoolId:any,
        userName:string
    }
    let addForm = reactive<add>({
        classIds: [],
        gender: null,
        loginName: "",
        schoolId: null,
        userName: ""
    })
    const changeEdit = () => {
        addForm.schoolId = null
        addForm.classIds = []
        editForm.value.schoolId = null
        editForm.value.classIds = []
        clsList = ref([])
    }
    //监听表单单一值变化
    watch(()=>addForm.schoolId, async (newVal, oldVal) => {
        if (newVal){
            const { data } = await classNoPage(addForm.schoolId)
            if (data.statusCode === 200){
                clsList.value = data.data
            }
        }
    })
	const submitAdd = async () => {
        const { data } = await addTec(addForm)
        if (data.statusCode === 200) {
            ElNotification({
                title: '提 示',
                message: data.message,
                type: 'success',
            })
            addDialog.value = false
            addForm.classIds = []
            addForm.gender = null
            addForm.loginName = ""
            addForm.schoolId = null
            addForm.userName = null
            await getList()
        }
	}
    //删除用户
    const del = (id) => {
        ElMessageBox.confirm(
            '确定删除此教师?',
            '提 示',
            {confirmButtonText: '确 定',cancelButtonText: '取 消',  type: 'warning',}
        )
            .then(() => {
                delUser(id).then(res => {
                    if (res.data.statusCode === 200){
                        ElNotification({
                            title: '提 示',
                            message: res.data.message,
                            type: 'success',
                        })
                        getList()
                    }
                })
            })
            .catch(() => {
            })
    }
    //重置密码
    const res = (id) => {
        ElMessageBox.confirm(
            '确定重置此密码?',
            '提 示',
            {confirmButtonText: '确 定',cancelButtonText: '取 消',  type: 'warning',}
        )
            .then(() => {
                retPas(id).then(res => {
                    if (res.data.statusCode === 200){
                        ElNotification({
                            title: '提 示',
                            message: res.data.message,
                            type: 'success',
                        })
                        getList()
                    }
                })
            })
            .catch(() => {
            })
    }
    //编辑操作 ↓
    let editDialog = ref<boolean>(false)
    let editForm = ref({
        classIds: [],
        gender: null,
		id:null,
        loginName: "",
        schoolId: null,
        userName: ""
	})
    const openEdit = (item) => {
        editForm.value.classIds=[]
         item.classes.forEach(i => {
           editForm.value.classIds.push(i.id)
		})
        editForm.value.gender = item.gender
        editForm.value.id = item.id
        editForm.value.loginName = item.loginName
        editForm.value.schoolId = item.schoolId
        editForm.value.userName = item.userName
        editDialog.value = true
    }
    //监听表单单一值变化
    watch(()=>editForm.value.schoolId, async (newVal, oldVal) => {
        if (newVal){
           
            const { data } = await classNoPage(editForm.value.schoolId)
            if (data.statusCode === 200){
                clsList.value = data.data
            }
        }
    })
	const changeEditSch = () => {
        editForm.value.classIds = []
	}
  	const submitEdit =  async () => {
      const { data } = await editTec(editForm.value)
      if (data.statusCode === 200) {
          ElNotification({
              title: '提 示',
              message: data.message,
              type: 'success',
          })
          editDialog.value = false
          await getList()
      }
  }
    //查看班级 ↓
    let seeDialog = ref<boolean>(false)
    let seeList = ref([])
    const openSee = (item) => {
        seeList = item.classes
        seeDialog.value = true
    }
</script>

<style scoped lang="less">
	.contain{
		position: relative;
		width: 100%;
		height: 100%;
		.contain-header{
			margin-bottom: 20px;
			display: flex;
			justify-content: flex-end;
		}
		.contain-table{
			margin: 0 auto 20px;
			width: 90%;
			.tab-line{
				width: 100%;
				display: flex;
				margin-bottom: 20px;
				align-items: center;
				padding: 0 20px;
				box-sizing: border-box;
				justify-content: space-between;
				.tab-show{
					width: 15%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
				.tab-set{
					width: 25%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
			}
			.tab-body{
				width: 100%;
				display: flex;
				margin-bottom: 10px;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 20px;
				border-radius: 20px;
				box-sizing: border-box;
				.tab-show{
					width: 15%;
					text-align: center;
					font-size: 16px;
					color: #333;
				}
				.tab-set{
					width: 25%;
					text-align: center;
				}
			}
		}
		.contain-footer{
			position: absolute;
			bottom: 5%;
			left: -50%;
			transform: translateX(50%);
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
